<template>
  <div class="shopping" id="app">
    <!-- 身体 -->
    <div class="body">
      <h1>购物车</h1>
      <div class="bodyA" v-for="(item,index) in data.shop" :key="index">
        <input type="checkbox" v-model="item.checked" v-if="item.stock!==0" @change="checkB">
        <span v-else style="margin: 0;padding: 3px;background-color:#ccc;border-radius: 3px;font-size: 13px;">无货</span>
        <img :src="item.mainimage" alt="">
        <span style="width:200px">{{item.title}}</span>
        <span>￥{{item.price}}.00</span>
        <div class="bodyBut">
          <el-input-number v-model="item.quantity" :min="1" :max="10" @change="handleChange(index)" />
        </div>
        <!-- <el-popconfirm confirm-button-text="是的" cancel-button-text="我想想" :icon="InfoFilled" icon-color="#626AEF"
          title="你确定不要此商品了？" @confirm="confirmEvent(item.id)" @cancel="cancelEvent"> -->
        <div>
          <!-- <span><img src="/images/cart/回收站.svg" alt=""></span> -->
          <el-button text @click="open(item.carid,item.id)" confirm-button-class="movers" style="margin-left:100px">
            <el-icon style="font-size:22px">
              <DeleteFilled />
            </el-icon>
          </el-button>
        </div>
        <!-- </el-popconfirm> -->
        <!--  -->
      </div>
      <div class="footer" v-show="data.shop.length!=0">
        <div>
          <input id="checkAll" type="checkbox" v-model="data.checkAll" @change="checkA">
          &nbsp; &nbsp;<label for="checkAll">全选</label>
          <!-- 全部删除 -->
          <p @click="dele" style="cursor:pointer">删除</p>
        </div>
        <div class="figure">
          <span>合计:</span>
          <span class="zj">￥{{totals}}.00</span>


          <a href="javascript:;" @click="handleOrder" v-if="flag">
            <el-button color="#626aef">立即结算</el-button>
          </a>
          <el-button @click="unchecked" color="#626aef" v-else>立即结算</el-button>
        </div>
      </div>
    </div>

    <!-- 脚 -->
    <!-- <Footer></Footer> -->

    <!-- 购物车没有商品时 -->

    <div class="contents" v-show="data.shop.length==0">
      <img src="/images/cart/icon-16.png" alt="">
      <p>您的购物车里什么都没有哦~</p>
      <router-link to="/">
        <el-button>去逛一逛</el-button>
      </router-link>
    </div>



    <!-- 尾巴 -->
    <div class="tail">
      <div class="tailSc">
        <span>商品推荐</span>
      </div>

      <div class="tailSp">

        <ul>
          <li v-for="(item,index) in recommend" :key="index">
            <router-link :to="{name:'Product',query:{id:item.id}}">
              <img :src="item.mainimage" alt="">
              <div class="tent">
                <p>{{ item.title}}</p>
                <span>￥{{ item.price }}.00</span>
              </div>
            </router-link>
          </li>
        </ul>

      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>


a:hover{
  text-decoration: none !important;
}
.shopping {
    width: 1200px;
    // margin: 0 auto;
    margin-left:150px ;
}
// .marginTop {
//   margin-top: 65px;
// }

.body {
    margin-top: 106px;
    font-size: 16px;
    h1 {
        margin-top: 100px;
        font-size: 24px;
    }
    // 没有商品时
    .bodyA {
      display: flex;
      justify-content: space-between;
        padding: 50px 0;
        border-top: 1px solid #ccc;
        img{
          width: 100px;
          height: 100px;
        }
    }

    div {
        display: flex;
        align-items: center;
        .bodyBut {
            padding-left: 50px;
        }

        img {
            margin: 0 100px;
        }
        p {
            margin: 30px;
        }
        span {
            margin: 0 40px;
            img {
                margin-right: 0;
                width: 20px;
                height: 20px;
            }
        }
    }
    .footer {
        display: flex;
        justify-content: space-between;
        padding-top: 50px;
        font-size: 20px;
        border-top: 1px solid #ccc;
        .figure {
            span {
                margin: 20px;
            }
            .zj{
                  font-size: 26px;
                    color: deepskyblue;
            }
            button {
                width: 200px;
                height: 60px;
            }
        }
    }
}

//没有商品时显示
.contents {
    height: 400px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding-top: 80px;
    p {
        color: #ccc;
        margin-bottom: 30px;
    }
    span {
        color: white;
    }
    .el-button {
        margin: 0 10px;
    }
}

.tail {
    position: relative;
    top: 50px;
    .tailSc {
        margin: 30px 0;
        span {
            font-size: 24px;
        }
    }
    .tailSp {
        padding-bottom: 150px;
        ul {
            display: flex;
            justify-content: space-between;
            li {
              
                width: 230px;
                // height: 330px;
                font-size: 16px;
                img {
                    width: 100%;
                    background: rgb(245, 245, 245);
                }
                &:hover {
                    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
                }
                //
                .tent {
                    padding: 15px 10px;
                    p{
                      height: 40px;
                      display: -webkit-box;
                      -webkit-line-clamp: 2;
                      -webkit-box-orient: vertical;
                      overflow: hidden;
                      width: 100%;
                      margin-bottom:20px ;
                    }
                    span {
                        color: deepskyblue;
                        font-size:18px;
                      }
                }
            }
        }
    }
}
</style>


<script setup>
import PubSub from 'pubsub-js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, onMounted, computed, nextTick, ref, getCurrentInstance } from 'vue'
import { useRouter } from "vue-router";

const router = useRouter();

const { proxy } = getCurrentInstance();
// 商品数据
let data =reactive({
  checkAll:false,
  shop:[],
  list:[
        // 后端拿值
       ],
  selectItem:[]
})
// 点击跳转order
const handleOrder = ()=>{
  sessionStorage.setItem('order',JSON.stringify(data.selectItem));
  router.push('/cart/order');
}

// 限制商品数量
// const num = ref(1)
const handleChange = (index) => {
  // console.log(data.shop[index].count);
  if (data.shop[index].quantity===null){
    nextTick(()=>{
      data.shop[index].quantity = 1
    })  
  }
}
// 总计价格
let totals = computed(() => {
  let total = 0
  data.shop.forEach(element => {
    if (element.checked) {
      total += element.price * element.quantity
    }
  });
  return total
})

onMounted(()=>{
  PubSub.publishSync('item', 0);
  // 获取用户的购物车 商品信息
  proxy.$get('/api/data/cart').then(cart_data=>{
    data.shop = cart_data
    // console.log(cart_data);
  })
})

// 全选
let flag = ref(false);
const checkA=()=>{
  data.shop.forEach(element => {
    element.checked=data.checkAll
  })
  flag.value = data.shop.some(item => {
    return item.checked
  })
  // 获取选中商品的信息
  data.selectItem = data.shop.filter(item=>{
    return item.checked
  })
}
// 单选
const checkB=()=>{
  data.checkAll = data.shop.every(element => {
   return element.checked
  })
  flag.value = data.shop.some(item=>{
  return item.checked
  })
  // 获取选中商品的信息
  data.selectItem = data.shop.filter(item=>{
    return item.checked
  })
}

// 回收站提示框
const open = (carid,index) => {
  ElMessageBox.confirm(
    '您否要将该商品在购物车中移出',
    '警告',
    {
      confirmButtonText: '是的',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      // 请求删除商品
      proxy.$post('/api/cart/removeCart',{id: carid}).then(data1=>{
        ElMessage({
          type: 'success',
          message: data1,
        });
        let id = data.shop.findIndex((item) => {
          return item.id === index
        });
        data.shop.splice(id, 1);
      })
    })
    .catch(() => {
      // 取消删除商品
      ElMessage({
        type: 'info',
        message: '移除已取消',
      })
    })
}
// 未选中商品提示用户
const unchecked = ()=>{
  ElMessage('请选择购物车商品');
}
// 推荐商品遍历 后端遍历拿值
let recommend=ref()
onMounted(() => {
  proxy.$get("/api/data/recommend").then((data) => {
    recommend.value = data;
    // console.log(recommend.value);
  })
})


//删除勾选商品
let dele=()=>{
  let items = data.shop.filter((item) => {
    return !item.checked
  })
  let delItems = data.shop.filter((item) => {
    return item.checked
  })
  if (items.length === data.shop.length){
    ElMessage({
      message: '您没有选中商品哦',
      type: 'warning',
    })
  }else{
    ElMessageBox.confirm(
      '您确定要删除所选中的商品么',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        proxy.$post('/api/cart/deleteAll',{delItems}).then(data1=>{
          data.shop = items;
          ElMessage({
            type: 'success',
            message: data1,
          })
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
  }
}
</script>
